<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="菜单权限" name="first">
        <!-- 最外围 -->
        <div v-for="item in dataList">
          <div class="listBox">
            <div class="list p-10" @click="muenclick(1,item)">
              <i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
              <p>{{item.title}}</p>
            </div>
            <div class="list" v-for="itemA in item.children">
              <div class="list p-10" @click="muenclick(2,itemA)">
                <i :class="itemA.type ?'el-icon-star-on':'el-icon-star-off'"></i>
                <p>{{itemA.title}}</p>
              </div>
              <div class="list p-10 ml-10" v-for="itemB in itemA.children" @click="muenclick(3,itemB)">
                <i :class="itemB.type?'el-icon-star-on':'el-icon-star-off'"></i>
                <p>{{itemB.title}}</p>
              </div>
            </div>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane label="按钮权限" name="second">
        <div class="p-10 list listBox" v-for="item in ButtonList">
          <div style="display: flex;align-items: center;" @click="recordAll(item)">
            <p>{{item.billid}}</p>
            <i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
          </div>
          <div style="display: flex;margin-left: 10px;">
            <p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
               @click="typeChange(el)">{{el.name}}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据权限" name="third">
        <div class="p-10 list listBox" v-for="item in recordList">
          <div style="display: flex;align-items: center;" @click="recordAll(item)">
            <p>{{item.billid}}</p>
            <i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
          </div>
          <div style="display: flex;margin-left: 10px;">
            <p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
               @click="typeChange(el)">{{el.name}}</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
export default {
  name: "review",
  components: {
    baseDialog
  },
  data() {
    return {
      activeName: 'first',
      // 数据权限
      ButtonList:[],
      recordList: [{
        billid: '合同管理',
        type: false,
        ids:[],
        dataDetail: [
          {name: '浙江用安',
            id: 60,
            type: false,
          },
          {
            name: '销售部',
            id: 58,
            type: false,
          },
          {
            name: '实施服务',
            id: 61,
            type: false,
          },
        ],
      },
        {
          billid: '项目管理',
          type: true,
          dataDetail: [
            {
              name: '浙江用安',
              id: 60,
              type: false,
            },
            {
              name: '销售部',
              id: 58,
              type: false,
            },
            {
              name: '实施服务',
              id: 61,
              type: false,
            },
          ],
        },
      ],
      dataList: [{
        title: '系统管理',
        type: 1,
        id:1,
        children: [{
          title: '数据字典',
          type: false,
          id:2
        },
          {
            title: '用户管理',
            type: 1,
            id:3,
            children: [{
              title: '角色管理',
              type: true,
              id:4
            },
              {
                title: '人员管理',
                type: false,
                id:5
              },
            ]
          }
        ]
      },
        {
          title: '系统维护',
          type: false,
          id:6,
          children: [{
            title: 'LayUI图标库',
            type: false,
            id:7
          }]
        }
      ],
    }
  },
  watch: {
    dataList: {
      deep: true, //深度监听设置为 true
      handler: function(newV, oldV) {
        newV.forEach(el => {
          el.children.forEach(item => {
            if (item.type == true) {
              el.type = true
            }
            if (item.children && item.children.length > 0) {
              item.children.forEach(last => {
                if (last.type == true) {
                  el.type = true
                }
              })
            }
          })
        })
      }
    },
    recordList: {
      deep: true, //深度监听设置为 true
      handler: function(newV, oldV) {
        let num = 0
        newV.forEach(el => {
          el.dataDetail.forEach(item => {
            if (item.type == true) {
              el.type = true
              num = num +1
            }
          })
          if(num == 0){
            el.type = false
          }
        })

      }
    },
  },

  methods: {

    getMenuTreeselect() {
      menuTreeselect().then((response) => {
        const parseTree = (arr) => {
          if (arr.length > 0) {
            arr.forEach(item => {
              if (item.id) {
                item['label'] = this.$t(allPermis.filter(p => p.id === item.id)[0]?.localKey)
              }
              if (item.children && item.children.length > 0) {
                parseTree(item.children)
              }
            })
          }
          return arr
        }
        this.menuOptions = parseTree(response.data)
      })
    },



    handleClick(tab, event) {
      let ids = []
      const parseTree = (arr) =>{
        arr.forEach(item =>{
          if(item.type){
            ids.push(item.id)
          }
          if (item.children && item.children.length > 0) {
            parseTree(item.children)
          }
        })
        return ids
      }
      let vrr = parseTree(this.dataList)
      this.getButtonList(vrr)
    },
    async getButtonList(vrr){
      this.ButtonList = []
      let arr = {
        billid: '用户管理',
        type: false,
        ids:[],
        dataDetail: [
          {	name: '新增',
            id: 60,
            type: false,
          },
          {
            name: '编辑',
            id: 58,
            type: false,
          },
          {
            name: '删除',
            id: 61,
            type: true,
          },
        ],
      }
      if(vrr.length > 0){
        vrr.forEach(el=>{
          if(el == 3){
            this.ButtonList.push(arr)
          }
        })
      }
    },
    // 数据权限全选
    recordAll(item) {
      item.dataDetail.forEach(el => {
        if (item.type ==false) {
          this.AllType(el, true)
        } else {
          this.AllType(el, false)
        }
      })
      this.typeChange(item)
    },
    // 改变选中
    typeChange(item) {
      if (item.type == true) {
        item.type = false
      } else {
        item.type = true
      }
    },
    AllType(item, type) {
      item.type = type
    },
    muenclick(index, item) {
      let ids = []
      // index代表多少级菜单
      if (index == 1) {
        if (item.type == false) {
          ids.push(item.id)
          this.AllType(item, true)
          item.children.forEach(el => {
            this.AllType(el, true)
            if (el.children && el.children.length > 0) {
              el.children.forEach(small => {
                ids.push(item.id)
                this.AllType(small, true)
              })
            }
          })
        } else {
          this.AllType(item, false)
          item.children.forEach(el => {
            this.AllType(el, false)
            if (el.children && el.children.length > 0) {
              el.children.forEach(small => {
                this.AllType(small, false)
              })
            }
          })
        }
      } else {
        this.typeChange(item)
      }
    }
  },
  mounted() {

  }

}
</script>

<style scoped lang="scss">
.recordText {
  border: 1px solid #fff;
  width: 60px;
  padding: 5px 0;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  background: #f2f2f2;
  color: #e0e0e0;
  margin: 0px 3px;
}

.recordText.active {
  background: #00a490;
  color: #fff;
}

.listBox {
  border-top: 1px solid #ccc;
}

.list {
  display: flex;
  align-content: center;
  cursor: pointer;
}

.ml-10 {
  margin-left: 10px;
}

.p-10 {
  padding: 10px 0;
}

.small.active {
  border-color: crimson transparent transparent transparent;
}

.small.active:before,
.small.active:after {
  border-color: crimson transparent transparent transparent;
}

.small {
  border-color: #7d7d7d transparent transparent transparent;
  border-style: solid;
  border-top-width: 9.375px;
  border-right-width: 15px;
  border-left-width: 15px;
  height: 0;
  margin-top: 9.375px;
  margin-bottom: 6.02679px;
  position: relative;
  width: 0;
  margin: 2rem 0.8rem;
}

.small:before,
.small:after {
  border-color: #7d7d7d transparent transparent transparent;
  border-style: solid;
  border-top-width: 9.375px;
  border-right-width: 15px;
  border-left-width: 15px;
  content: '';
  display: block;
  height: 0;
  left: -15px;
  position: absolute;
  top: -9.375px;
  width: 0;
}

.small:before {
  transform: rotate(70deg);
}

.small:after {
  transform: rotate(-70deg);
}

</style>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on{
  /* color: #00aa00; */
  color: $activeColor;
}
</style>
